<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 11:41:38
 * @LastEditTime : 2022-09-30 11:41:43
 * @FilePath     : \表单控件绑定\v-model和组件\第二种(用于自定义输入组件上)\使用默认的属性名称\不和计算属性一起使用\第二种方式：原生语法糖和defineComponent\CustomInput.vue
-->
<script lang="ts">
    import { defineComponent } from "vue";
    
    export default defineComponent({
        name: 'CustomInput',
        props: ['modelValue'],  //默认是这个属性 modelValue
        emits: ['update:modelValue'], //默认是这个触发事件名称
        setup(props, ctx) {
            const handleValue  = (event) => {
                ctx.emit('update:modelValue', event.target.value)
            }
    
            return {
                handleValue
            }
        }
    })
</script>
    
<template>
    <input
        :value="modelValue"
        @input="handleValue($event)"
    >
</template>